<!DOCTYPE html>
<html>
<head>
    <title>项目专家关联管理</title>
    <#include "../../include/head-file.ftl"/>
    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.2/css/index.css">
</head>
<body>
<div id="app" class="ms-admin-projectexpert-container">
    <el-header class="ms-header" height="50px">
        <el-col :span="24">
            <@ms.search class="ms-search" action="">
                <@ms.searchInput name="keyword" label="请输入项目名称或专家姓名" title="请输入项目名称或专家姓名" value="" />
            </@ms.search>
        </el-col>
    </el-header>
    <el-main class="ms-container">
        <el-table ref="multipleTable" height="calc(100% - 68px)" class="ms-table" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="projectCode" label="项目编号" width="100" align="center"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" min-width="180" align="center"></el-table-column>
            <el-table-column prop="expertCode" label="专家编号" width="100" align="center"></el-table-column>
            <el-table-column prop="expertName" label="专家姓名" width="120" align="center"></el-table-column>
            <el-table-column prop="role" label="参与角色" width="120" align="center"></el-table-column>
            <el-table-column prop="joinDate" label="加入日期" width="120" align="center"></el-table-column>
            <el-table-column prop="contribution" label="贡献度" width="80" align="center"></el-table-column>
            <el-table-column prop="workload" label="工作量(人日)" width="120" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center"></el-table-column>
            <el-table-column label="操作" align="center" min-width="180">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                    <el-link type="primary" :underline="false" @click="handleDetails(scope.row)">详情</el-link>
                    <el-link type="primary" :underline="false" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="ms-pagination"
                background
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                @current-change="handleCurrentChange">
        </el-pagination>
    </el-main>
    <ms-dialog :title="relationForm.id ? '编辑项目专家关联' : '添加项目专家关联'" :visible.sync="dialogVisible" width="70%">
        <el-form ref="relationForm" :model="relationForm" :rules="rules" label-width="120px" size="small">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="项目选择" prop="projectId">
                        <el-select v-model="relationForm.projectId" filterable placeholder="请选择项目" style="width: 100%" @change="handleProjectChange">
                            <el-option
                                v-for="item in projectOptions"
                                :key="item.id"
                                :label="item.projectName"
                                :value="item.id">
                                <span>{{ item.projectCode }} - {{ item.projectName }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="专家选择" prop="expertId">
                        <el-select v-model="relationForm.expertId" filterable placeholder="请选择专家" style="width: 100%" @change="handleExpertChange">
                            <el-option
                                v-for="item in expertOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                <span>{{ item.expertCode }} - {{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="项目编号" prop="projectCode">
                        <el-input v-model="relationForm.projectCode" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="relationForm.projectName" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="专家编号" prop="expertCode">
                        <el-input v-model="relationForm.expertCode" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="专家姓名" prop="expertName">
                        <el-input v-model="relationForm.expertName" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="参与角色" prop="role">
                        <el-select v-model="relationForm.role" placeholder="请选择角色" style="width: 100%">
                            <el-option label="项目负责人" value="项目负责人"></el-option>
                            <el-option label="技术负责人" value="技术负责人"></el-option>
                            <el-option label="核心成员" value="核心成员"></el-option>
                            <el-option label="普通成员" value="普通成员"></el-option>
                            <el-option label="顾问" value="顾问"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="加入日期" prop="joinDate">
                        <el-date-picker
                                v-model="relationForm.joinDate"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="贡献度" prop="contribution">
                        <el-input-number v-model="relationForm.contribution" :min="0" :max="100" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作量(人日)" prop="workload">
                        <el-input-number v-model="relationForm.workload" :min="0" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="relationForm.status" placeholder="请选择状态" style="width: 100%">
                            <el-option label="在职" value="在职"></el-option>
                            <el-option label="离职" value="离职"></el-option>
                            <el-option label="暂停" value="暂停"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="技术方向" prop="techDirection">
                        <el-input v-model="relationForm.techDirection"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="职责描述" prop="responsibilities">
                        <el-input type="textarea" v-model="relationForm.responsibilities" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" v-model="relationForm.remarks" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveRelation">确 定</el-button>
        </span>
    </ms-dialog>
    
    <!-- 关联详情弹窗 -->
    <el-dialog title="项目专家关联详情" :visible.sync="detailsVisible" width="70%">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="项目编号">{{ relationDetails.projectCode }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ relationDetails.projectName }}</el-descriptions-item>
            <el-descriptions-item label="专家编号">{{ relationDetails.expertCode }}</el-descriptions-item>
            <el-descriptions-item label="专家姓名">{{ relationDetails.expertName }}</el-descriptions-item>
            <el-descriptions-item label="参与角色">{{ relationDetails.role }}</el-descriptions-item>
            <el-descriptions-item label="加入日期">{{ relationDetails.joinDate }}</el-descriptions-item>
            <el-descriptions-item label="贡献度">{{ relationDetails.contribution }} %</el-descriptions-item>
            <el-descriptions-item label="工作量">{{ relationDetails.workload }} 人日</el-descriptions-item>
            <el-descriptions-item label="状态">{{ relationDetails.status }}</el-descriptions-item>
            <el-descriptions-item label="技术方向">{{ relationDetails.techDirection }}</el-descriptions-item>
            <el-descriptions-item label="职责描述" :span="2">{{ relationDetails.responsibilities }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ relationDetails.remarks }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
    
    <!-- Excel导入弹窗 -->
    <el-dialog title="导入项目专家关联数据" :visible.sync="importVisible" width="500px">
        <el-upload
                class="upload-demo"
                drag
                :action="ms.manager + '/expertmanage/projectexpert/import'"
                :on-success="handleImportSuccess"
                :on-error="handleImportError"
                :before-upload="beforeImportUpload"
                :file-list="importFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只支持.xlsx, .xls格式的Excel文件</div>
        </el-upload>
        <div class="import-template">
            <span>没有导入模板？</span>
            <el-button type="text" @click="downloadTemplate">下载模板</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [], // 关联列表数据
            selectionList: [], // 多选数据
            total: 0, // 总记录数量
            pageNum: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            loading: false, // 加载状态
            keyword: '', // 搜索关键字
            dialogVisible: false, // 表单弹窗显示状态
            detailsVisible: false, // 详情弹窗显示状态
            importVisible: false, // 导入弹窗显示状态
            importFileList: [], // 导入文件列表
            relationForm: {}, // 关联表单数据
            relationDetails: {}, // 关联详情数据
            projectOptions: [], // 项目选项列表
            expertOptions: [], // 专家选项列表
            rules: {
                projectId: [
                    { required: true, message: '请选择项目', trigger: 'change' }
                ],
                expertId: [
                    { required: true, message: '请选择专家', trigger: 'change' }
                ],
                role: [
                    { required: true, message: '请选择参与角色', trigger: 'change' }
                ],
                joinDate: [
                    { required: true, message: '请选择加入日期', trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ]
            }
        },
        methods: {
            // 查询关联列表
            list: function () {
                var that = this;
                that.loading = true;
                ms.http.get(ms.manager + "/expertmanage/projectexpert/list", {
                    params: {
                        pageNum: that.pageNum,
                        pageSize: that.pageSize,
                        keyword: that.keyword
                    }
                }).then(function (res) {
                    if (res.result) {
                        that.dataList = res.data.records;
                        that.total = res.data.total;
                    }
                    that.loading = false;
                });
            },
            // 获取项目列表
            getProjects: function() {
                var that = this;
                ms.http.get(ms.manager + "/expertmanage/project/all").then(function (res) {
                    if (res.result) {
                        that.projectOptions = res.data;
                    }
                });
            },
            // 获取专家列表
            getExperts: function() {
                var that = this;
                ms.http.get(ms.manager + "/expertmanage/expert/all").then(function (res) {
                    if (res.result) {
                        that.expertOptions = res.data;
                    }
                });
            },
            // 处理项目选择变化
            handleProjectChange: function(projectId) {
                var that = this;
                var project = this.projectOptions.find(function(item) {
                    return item.id === projectId;
                });
                if (project) {
                    that.relationForm.projectCode = project.projectCode;
                    that.relationForm.projectName = project.projectName;
                }
            },
            // 处理专家选择变化
            handleExpertChange: function(expertId) {
                var that = this;
                var expert = this.expertOptions.find(function(item) {
                    return item.id === expertId;
                });
                if (expert) {
                    that.relationForm.expertCode = expert.expertCode;
                    that.relationForm.expertName = expert.name;
                }
            },
            // 重置表单
            resetForm: function() {
                this.relationForm = {
                    status: "在职",
                    joinDate: new Date(),
                    contribution: 0,
                    workload: 0
                };
                if (this.$refs.relationForm) {
                    this.$refs.relationForm.resetFields();
                }
            },
            // 显示新增关联弹窗
            handleAdd: function () {
                this.resetForm();
                this.getProjects();
                this.getExperts();
                this.dialogVisible = true;
            },
            // 显示编辑关联弹窗
            handleEdit: function (row) {
                this.resetForm();
                this.getProjects();
                this.getExperts();
                this.relationForm = JSON.parse(JSON.stringify(row));
                this.dialogVisible = true;
            },
            // 显示关联详情
            handleDetails: function (row) {
                this.relationDetails = row;
                this.detailsVisible = true;
            },
            // 保存关联信息
            saveRelation: function () {
                var that = this;
                this.$refs.relationForm.validate(function (valid) {
                    if (valid) {
                        var url = that.relationForm.id ? ms.manager + "/expertmanage/projectexpert/update" : ms.manager + "/expertmanage/projectexpert/save";
                        ms.http.post(url, JSON.stringify(that.relationForm)).then(function (res) {
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.dialogVisible = false;
                                that.list();
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 删除关联
            handleDelete: function (index, row) {
                var that = this;
                this.$confirm('确认删除该关联？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    ms.http.post(ms.manager + "/expertmanage/projectexpert/delete/" + row.id).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 批量删除
            handleDeleteAll: function () {
                if (this.selectionList.length == 0) {
                    this.$notify({
                        title: '提示',
                        message: '请选择要删除的关联',
                        type: 'warning'
                    });
                    return;
                }
                var that = this;
                this.$confirm('确认删除选中的关联？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var ids = [];
                    that.selectionList.forEach(function (item) {
                        ids.push(item.id);
                    });
                    ms.http.post(ms.manager + "/expertmanage/projectexpert/delete", ids).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 分页页码改变
            handleCurrentChange: function (currentPage) {
                this.pageNum = currentPage;
                this.list();
            },
            // 多选改变
            handleSelectionChange: function (selection) {
                this.selectionList = selection;
            },
            // 搜索
            search: function () {
                this.pageNum = 1;
                this.list();
            },
            // 显示导入弹窗
            handleImport: function () {
                this.importVisible = true;
                this.importFileList = [];
            },
            // 上传文件前检查
            beforeImportUpload: function (file) {
                var isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
                if (!isExcel) {
                    this.$message.error('上传文件只能是Excel格式!');
                    return false;
                }
                return true;
            },
            // 导入成功回调
            handleImportSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.$notify({
                        title: '成功',
                        message: response.data,
                        type: 'success'
                    });
                    this.importVisible = false;
                    this.list();
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.msg,
                        type: 'warning'
                    });
                }
            },
            // 导入失败回调
            handleImportError: function (err, file, fileList) {
                this.$notify({
                    title: '失败',
                    message: '导入失败，请检查文件格式',
                    type: 'error'
                });
            },
            // 下载模板
            downloadTemplate: function () {
                window.location.href = ms.manager + "/expertmanage/projectexpert/template";
            }
        },
        mounted: function () {
            this.list();
            this.resetForm();
        }
    });
</script>

<style>
    .ms-admin-projectexpert-container {
        margin: 12px;
        height: 100%;
    }
    
    .ms-container {
        height: calc(100% - 50px);
        padding: 0;
    }
    
    .ms-header {
        padding: 0;
        margin-bottom: 10px;
    }
    
    .ms-search {
        display: flex;
        align-items: center;
    }
    
    .ms-search .el-button {
        margin-left: 10px;
    }
    
    .ms-table {
        width: 100%;
    }
    
    .ms-pagination {
        margin-top: 20px;
        text-align: right;
    }
    
    .el-link {
        margin-right: 10px;
    }
    
    .import-template {
        margin-top: 10px;
        text-align: center;
    }
</style> 